<template>
  <div class="container" ref="box">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">我的评价</p>
    </van-nav-bar>
    <div v-if="commentlist&&!commentlist.length">
      <comment class="comments" :comment="item" v-for="(item,index) in commentlist" :key="index"></comment>
    </div>
    <van-empty description="没有评论"/>
  </div>
</template>

<script>
import { requestMyComments } from '../../api/commodity'
import Comment from '../../components/comment/Comment'
import $throttle from '../../../public/js/speed'

export default {
  name: 'Keep',
  data () {
    return {
      commentlist: []
    }
  },
  activated () {
    this.$refs.box.scrollTop = localStorage.getItem('comments') || 0
  },
  mounted () {
    requestMyComments().then(res => {
      this.commentlist = res.data
      this.$refs.box.addEventListener('scroll', () => {
        $throttle(() => {
          localStorage.setItem('comments', this.$refs.box.scrollTop)
        }, 300)
      })
    })
  },
  methods: {
    back () {
      this.$router.back()
    }
  },
  components: {
    Comment
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  overflow: auto;
}

.comments {
  margin-top: 10px;
}

.comments:nth-child(2) {
  margin-top: 0;
}

</style>
